<template>
  <section class="i-main">
      <section class="container">
          <div class="base-info">
              <div>
                  <img class="league-header" :src="default_header">
              </div>
              <div>
                  <div class="league-name">中国羽毛球公开赛</div>
                  <div class="league-time">比赛时间：2018年8月10日 - 2018年8月30日</div>
              </div>
          </div>
          <div class="more-info">
              <div></div>
          </div>
      </section>
  </section>
</template>

<style scoped lang="scss">
@import '../../../assets/css/variables.scss';

.base-info{ 
    @include flex;
    @include flex-align-center;
    padding-bottom: 15px;
    border-bottom: 1px solid $border-color;
    > div{ 
        display: inline-block; 
    }
}
.league-header{
    margin-right: 15px;
}
.league-name{
    font-size: 18px; font-weight: bold; margin-bottom: 10px;
}

</style>

<script>
  import * as default_header from '@/assets/img/default_header.png'

  export default {
    name: 'MatchDetails',
    components: {},
    data () {
      return {
          match: null,
          default_header: default_header
      }
    },
    created(){
        debugger;
        let self = this;
        let urlId = this.$route.params.matchId;
        if(this.$store.getters.match && this.$store.getters.match.id == urlId){
            this.match = this.$store.getters.match;
        }else{
            //ajax with id
            $.ajax({
                url: '/start/match/getMatchById',
                type: 'POST',
                data: {
                'id': urlId || ''
                },
                async: false,
                success(result){
                    self.match =  commons.formatMatch(result);
                },
                error(result){
                    
                }
            });
        }
    }
  }
</script>
